<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>美团</title>
        <!--基本样式表-->
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <!--文字图标样式表-->
        <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
        <!--滑动菜单样式表-->
        <link rel="stylesheet" type="text/css" href="css/swiper.min.css">
        <!--回顶部按钮样式-->
        <link rel="stylesheet" type="text/css" href="css/myPop.css">
    </head>
    <body>
        <!--头部-->
        <header>
            <div class="headerLeft">
                <a href="http://i.meituan.com/index/changecity">深圳 <span>v</span></a>
            </div>
            <a href="http://i.meituan.com/s/shenzhen">
                <div class="headerSearch">
                    <span class="iconfont search">&#xe605;</span>
                    <span class="searchText">输入商家/品类/商圈</span>
                </div>
            </a>

            <div class="headerRight">
                <a href="http://i.meituan.com/account/">
                <span class="iconfont">&#xe602;</span>
                <span class="my">我的</span>
                </a>
            </div>
        </header>

        <!--下载APP链接-->
        <div class="banner">
            <a href="http://i.meituan.com/client/wapbn?subchannel=i_banner_index&landingpage=1">
                <img src="http://p1.meituan.net/mmc/dbc70b32f22415bc55d1523d7141735c18365.jpg" />
            </a>
        </div>

        <!--滑动菜单列表-->
        <div id="list-in" class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><ul>
                    <li>
                        <a href="http://i.meituan.com/shenzhen?cid=1&cateType=poi">
                            <span class="iconfont" style="background-color: #fd9d21">&#xe60b;</span>
                            <span class="iconfontText">美食</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.meituan.com/shenzhen?cid=99&cateType=poi">
                            <span class="iconfont" style="background-color: #ff6767">&#xe60a;</span>
                            <span class="iconfontText">电影</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.meituan.com/awp/h5/hotel/search/search.html">
                            <span class="iconfont" style="background-color: #8a90fa">&#xe601;</span>
                            <span class="iconfontText">酒店</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.meituan.com/shenzhen?cid=2&cateType=poi">
                            <span class="iconfont" style="background-color: #fed030">&#xe614;</span>
                            <span class="iconfontText">休闲娱乐</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.waimai.meituan.com/mti/home?cityId=30&lat=22.52&lng=113.93">
                            <span class="iconfont" style="background-color: #fd9d21">&#xe610;</span>
                            <span class="iconfontText">外卖</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.meituan.com/shenzhen?cid=10&cateType=poi">
                            <span class="iconfont" style="background-color: #fed030">&#xe60d;</span>
                            <span class="iconfontText">KTV</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.meituan.com/trip/lvyou/triplist/poi/">
                            <span class="iconfont" style="background-color: #4dc6ee">&#xe60c;</span>
                            <span class="iconfontText">周边游</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.meituan.com/catehome/22?cevent=imt%2Fhomepage%2Fcategory1%2F22">
                            <span class="iconfont" style="background-color: #ff80c2">&#xe603;</span>
                            <span class="iconfontText">丽人</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.meituan.com/shenzhen?cid=36&cateType=poi">
                            <span class="iconfont" style="background-color: #fd9d21">&#xe615;</span>
                            <span class="iconfontText">小吃快餐</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.meituan.com/trip/train/search/?train_source=meituan@wap">
                            <span class="iconfont" style="background-color: #599eec">&#xe612;</span>
                            <span class="iconfontText">火车票</span>
                        </a>
                    </li>
                </ul></div>
                <div class="swiper-slide"><ul>
                    <li>
                        <a href="http://i.meituan.com/catehome/3?cevent=imt%2Fhomepage%2Fcategory2%2F3">
                            <span class="iconfont" style="background-color: #A8dd99">&#xe600;</span>
                            <span class="iconfontText">生活服务</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.meituan.com/shenzhen?cid=0&cateType=deal">
                            <span class="iconfont" style="background-color: #00d3be">&#xe611;</span>
                            <span class="iconfontText">今日新单</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.meituan.com/shenzhen?cid=78&cateType=deal">
                            <span class="iconfont" style="background-color: #4dc6ee">&#xe613;</span>
                            <span class="iconfontText">旅游</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.meituan.com/shenzhen?cid=52&cateType=poi">
                            <span class="iconfont" style="background-color: #fed030">&#xe60e;</span>
                            <span class="iconfontText">足疗按摩</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.meituan.com/shenzhen?cid=11&cateType=poi">
                            <span class="iconfont" style="background-color: #fd9d21">&#xe606;</span>
                            <span class="iconfontText">甜点饮品</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.meituan.com/shenzhen?cid=396&cateType=poi">
                            <span class="iconfont" style="background-color: #ff7360">&#xe604;</span>
                            <span class="iconfontText">婚纱摄影</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.meituan.com/catehome/20007?cevent=imt%2Fhomepage%2Fcategory2%2F20007">
                            <span class="iconfont" style="background-color: #ff80c2">&#xe608;</span>
                            <span class="iconfontText">母婴亲子</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.meituan.com/shenzhen?cid=20285&cateType=poi">
                            <span class="iconfont" style="background-color: #84d23d">&#xe609;</span>
                            <span class="iconfontText">学习培训</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.meituan.com/shenzhen?cid=20178&cateType=poi">
                            <span class="iconfont" style="background-color: #ff80c2">&#xe607;</span>
                            <span class="iconfontText">结婚</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://i.meituan.com/category?city=shenzhen">
                            <span class="iconfont" style="background-color: #00d3be">&#xe60f;</span>
                            <span class="iconfontText">全部分类</span>
                        </a>
                    </li>
                </ul></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

        <!--导购菜单-->
        <div id="daogou">
            <div id="left">
                <a href="http://i.meituan.com/firework/guide">
                    <span class="imgInfo">
                        <strong>我们约吧</strong>
                        <small>恋人家人好朋友</small>
                    </span>
                    <span class="daogouImg">
                        <img src="http://p0.meituan.net/mmc/fe4d2e89827aa829e12e2557ded363a112289.png">
                    </span>
                </a>
            </div>
            <div id="right">
                <div id="top">
                    <a href="http://i.meituan.com/topic/huilife">
                        <span class="imgInfo">
                            <strong>低价超值</strong>
                            <small>十元惠生活</small>
                        </span>
                        <span class="daogouImg">
                            <img src="http://p0.meituan.net/mmc/a06d0c5c0a972e784345b2d648b034ec9710.jpg">
                        </span>
                    </a>
                </div>
                <div id="bottom">
                    <div class="bottomLeft">
                        <a href="http://i.meituan.com/topic/scene/1">
                        <span class="imgInfo">
                            <strong>工作简餐</strong>
                            <small>实惠方便选择多</small>
                        </span>
                            <span class="daogouImg">
                            <img src="http://p1.meituan.net/mmc/726b30f162d1ea39a5077af83cec620811475.png">
                        </span>
                        </a>
                    </div>
                    <div class="bottomRight">
                        <a href="http://i.meituan.com/topic/mingdian">
                        <span class="imgInfo">
                            <strong>名店抢购</strong>
                            <small>距离结束</small>
                            <span class="time-panel">
                                <span class="span-time"></span>:<span class="span-time"></span>:<span class="span-time"></span>
                            </span>
                        </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!--猜你喜欢菜单列表-->
        <div id="content">
            <div id="guessLike">
                <div id="cainixihuan">猜你喜欢</div>
                <!--<div class="list">-->
                    <!--<a href="http://i.meituan.com/deal/39915701.html">-->
                        <!--<img src="http://p0.meituan.net/100.0/deal/e75041a0d845064c71a894a649a94969161930.jpg@422_0_947_947a%7C267h_267w_2e_90Q">-->
                        <!--<div class="title">新梅园圆通素食</div>-->
                        <!--<div class="info">[车公庙]午晚餐通用自助餐当宽度小的时候自动缩小,所以使用定位</div>-->
                        <!--<div class="priceInfo">-->
                            <!--<span class="price" style="font-weight: bolder">28</span>-->
                            <!--<span class="yuan">元</span>-->
                            <!--<span class="menshijia">门市价:<span class="menshi_price">35元</span></span>-->
                        <!--</div>-->
                        <!--<div class="sold">已售183210</div>-->
                        <!--<span class="nobooking"></span>-->
                    <!--</a>-->
                    <!--<a href="http://i.meituan.com/deal/39915701.html">-->
                        <!--<img src="http://p0.meituan.net/100.0/deal/e75041a0d845064c71a894a649a94969161930.jpg@422_0_947_947a%7C267h_267w_2e_90Q">-->
                        <!--<div class="title">新梅园圆通素食</div>-->
                        <!--<div class="info">[车公庙]午晚餐通用自助餐</div>-->
                        <!--<div class="priceInfo">-->
                            <!--<span class="price" style="font-weight: bolder">28</span>-->
                            <!--<span class="yuan">元</span>-->
                            <!--<span class="youhui">新用户1元抢</span>-->
                        <!--</div>-->
                        <!--<div class="sold">已售183210</div>-->
                        <!--<span class="nobooking"></span>-->
                    <!--</a>-->
                <!--</div>-->
                <div id="tuangou">
                    <a href="http://i.meituan.com/shenzhen">
                        查看全部团购
                        <span>></span>
                    </a>
                </div>
            </div>
        </div>

        <!--脚部-->
        <footer>
            <div id="footerBar">
                <a href="https://i.meituan.com/account/login">登入</a>
                <a href="http://i.meituan.com/account/signup">注册</a>
                <div class="pull-right">
                    <span>城市:</span>
                    <a href="http://i.meituan.com/index/changecity/">深圳</a>
                </div>
            </div>
            <div id="footerNav">
                <ul>
                    <li><a href="http://i.meituan.com/">首页</a></li>
                    <li><a href="http://i.meituan.com/orders/all">订单</a></li>
                    <li><a href="http://i.meituan.com/client/?from=footer&subchannel=i_ft&landingpage=1">客户端</a></li>
                    <li><a href="http://www.meituan.com?pcstyle=1">电脑版</a></li>
                    <li><a href="http://i.meituan.com/help/"  style="border-right-style: none">帮助</a></li>
                </ul>
            </div>
            <div id="footerLink">
                友情链接:
                <a href="http://m.maoyan.com/?channel=touch_group">猫眼电影</a>
            </div>
            <div id="footerCopyRight">
                <div class="hr"></div>
                <span class="footer-copyright-text">©2016 美团网 <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">京ICP证070791号</a></span>
            </div>
        </footer>

        <!--美团广告-->
        <div class="adv">
            <div class="close">
                <span>+</span>
            </div>
            <div class="advLogo">
                <img src="advLogo.jpg">
            </div>
            <div class="advInfo">
                <span>积分能当前花啦</span>
                <span>仅限美团手机客户端</span>
            </div>
            <div class="useLink">
                <a href="http://www.meituan.com/mobile/download/meituan/iphone/imeituan/i_return?from=touch&landingpage=1">立即使用</a>
            </div>
        </div>


        <!--script引用部分-->
        <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>

        <!--数据模板的js引用-->
        <script type="text/javascript" src="js/artTemplate.js"></script>

        <!--插入的数据模板-->
        <script type="text/html" id="listTemp">
            <a href="http://i.meituan.com/deal/39915701.html">
                <img src="{{img}}">
                <div class="title">{{title}}</div>
                <div class="info">{{info}}</div>
                <div class="priceInfo">
                    <span class="price">{{price}}</span>
                    <span class="yuan">元</span>
                    <span class="menshijia">门市价:<span class="menshi_price">{{menshi_price}}</span></span>
                    <span class="youhui">{{youhui}}</span>
                </div>
                <div class="sold">{{sold}}</div>
                <span class="nobooking"></span>
            </a>
        </script>
        <!--插入的数据的获取和渲染-->
        <script type="text/javascript">
            $(function () {
               $.ajax({
                   url: "js/DetailList.json",
                   dataType: "json",
                   success: function (data) {
                       var $div = $("<div class='list'></div>");
                       $.each(data,function (i,val) {
                           var $a = $(template('listTemp',val)).appendTo($div);
                           if(val.menshi_price == ""){
                               $a.find(".menshijia").remove();
                           }
                           if(val.youhui == ""){
                               $a.find(".youhui").remove();
                           }
                           if(val.nobooking == false){
                               $a.find(".nobooking").remove();
                           }
                       });
                       $div.insertAfter("#cainixihuan");
                   }
               })
            });
        </script>


        <!--滑动菜单的js引用-->
        <script src="js/swiper.min.js"></script>
        <script>
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                paginationClickable: true
            });
        </script>

        <!--计算倒计时的js-->
        <script type="text/javascript">
            var finishTime = new Date("2016-08-28 11:50:00");
            function jisuanshijian() {
                var now = new Date();

//                总共秒数
                var sec = (finishTime - now) / 1000;
//                小时
                var hours = parseInt(sec / 3600);
                hours = timePanelTool(hours);
//                分钟
                var min = parseInt((sec % 3600)/60);
                min = timePanelTool(min);
//                秒数math.round()四舍五入取整
                var seconds = parseInt(Math.round(sec % (3600) % (60)));
                seconds = timePanelTool(seconds);
                if(hours>=0 && min>=0 && seconds>=0){
                    $(".time-panel").children(":eq(0)").text(hours)
                            .next().text(min).next().text(seconds);
                }else {
//                    如果时间为负,则全部显示为零
                    $(".time-panel").children(":eq(0)").text("00")
                            .next().text("00").next().text("00");
                }
            }
//            判断个位数前加一个0
            function timePanelTool(data) {
                var t = data.toString();
                return t.length == 1 ? "0" + t : t ;
            }
//            每隔一秒刷新一次
            setInterval(jisuanshijian,1000);
        </script>

        <!--回顶部的按钮JS-->
        <script type="text/javascript" src="js/myPop.js"></script>
        <script>
            var $topBtn = lx_pop.createTopBtn();
            $topBtn.css("display","none").appendTo("body");
            var isTopBtnShow = false;
            window.onscroll = function () {
                var s = document.documentElement.scrollTop || document.body.scrollTop;
                if(s >= 500 && !isTopBtnShow){
                    $topBtn.css("display","block");
                    isTopBtnShow = true;
                }else if(s<500 && isTopBtnShow){
                    $topBtn.css("display","none");
                    isTopBtnShow = false;
                }
            }
        </script>

        <!--下载APP链接的显示和广告显示以及点击关闭广告按钮判断-->
        <script>
            $(function () {
                var clientWidth = document.body.clientWidth;
                console.log(clientWidth);
                if(clientWidth < 450){
                    $(".banner").css("display","block");
                    $(".adv").css("display","block");
                }
                else {
                    $(".banner").css("display","none");
                    $(".adv").css("display","none");
                }
                $(".close").on("click",function () {
                    $(".adv").css("display","none");
                });
            });
        </script>
    </body>
</html>